<template>
  <DefaultLayout>
    <v-container
      class="pa-4"
      fluid
    >
      <v-row 
        justify="center"
        dense
      >
        <v-col
          v-for="(item, index) in items"
          :key="index"
          align-self="center"
          cols="10"
          md="7"
        >
          <v-card
            :href="item.link"
            class="d-flex pa-4"
            outlined
          >
            <!-- 左侧图片 -->`
            <v-img
              :src="item.image"
              class="me-4"
              max-width="150px"
              height="150px"
              cover
            />
            <!-- 右侧内容 -->
            <v-card-content>
              <!-- 标题部分 -->
              <v-card-title>
                <span class="text-h6">{{ item.title }}</span>
              </v-card-title>

              <!-- 详情部分 -->
              <v-card-subtitle class="mb-3">
                <v-icon
                  small
                  class="me-1"
                >
                  mdi-calendar
                </v-icon>
                {{ item.date }}
                <v-icon
                  small
                  class="ms-3 me-1"
                >
                  mdi-tag
                </v-icon>
                {{ item.category }}
              </v-card-subtitle>

              <!-- 描述部分 -->
              <v-card-text>
                {{ item.description }}
              </v-card-text>
              <!-- 操作部分 -->
              <v-card-actions />
            </v-card-content>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </DefaultLayout>
</template>

<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const category = route.query.category // 获取路由实例

// 动态加载中文文件名的 md 文件
const files = import.meta.glob('../../../vuepress-starter/docs/**/*md', { eager: true, as: 'raw' });

// 用于存储生成的 items
const items = ref([]);
onMounted(() => {
  // 遍历所有文件，将它们根据文件夹进行分类
  Object.keys(files).forEach((filePath) => {
    const decodedPath = decodeURIComponent(filePath); // 解码中文路径
    const segments = decodedPath.split('/');
    let title = segments[segments.length-1];
    if(segments[5]==category){
    title = title.replace('.md','')
    items.value.push({ title: title,      
      link: `http://localhost:3001/docs/${category}/${encodeURIComponent(title)}`})
    } // 获取文件夹名作为标题
  });
})
// // 示例数据
// const items = ref([
//   {
//     title: 'Butterfly 安装文档（一）',
//     date: '2020-05-28',
//     category: 'Docs文档',
//     description: '长按复制链接',
//     link: 'articles',
//     image: 'https://via.placeholder.com/150', // 替换为实际图片地址
//   },
//   {
//     title: 'Butterfly 5.2 更新日志',
//     date: '2 个月前',
//     category: '更新日志',
//     description:
//       '新功能 说说支持评论 说说支持限制条数（时间或数字）更新相…',
//     link: 'articles',
//     image: 'https://via.placeholder.com/150', // 替换为实际图片地址
//   },
//   {
//     title: 'Butterfly 5.1 更新日志',
//     date: '2 个月前',
//     category: '更新日志',
//     description:
//       '新功能 添加 chart.js 图表库（需要外挂）适配 Algolia…',
//     link: 'articles',
//     image: 'https://via.placeholder.com/150', // 替换为实际图片地址
//   },

// ]);
</script>

<style scoped>
.v-card {
  border-radius: 10px;
  display: flex;
  align-items: flex-start; /* 确保图片和文字内容对齐 */
}
.v-card-title {
  font-weight: bold;
}
</style>
